<div ui-view="organization"></div>
<div ui-view="credential_type"></div>
<at-panel ng-if="!$state.current.name.includes('permissions')">
    <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>

    <at-tab-group>
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
        <at-tab state="vm.tab.permissions">{{:: vm.strings.get('tab.PERMISSIONS') }}</at-tab>
    </at-tab-group>

    <at-panel-body>
        <at-form state="vm.form" autocomplete="off" id="credential_form">
            <at-input-text col="4" tab="1" state="vm.form.name" id="credential_name_group"></at-input-text>
            <at-input-text col="4" tab="2" state="vm.form.description" id="credential_description_group"></at-input-text>
            <at-input-lookup col="4" tab="3" state="vm.form.organization" id="credential_organization_group"></at-input-lookup>

            <at-divider></at-divider>

            <at-input-lookup col="4" tab="5" state="vm.form.credential_type" id="credential_credential_type_group"></at-input-lookup>

            <at-input-group col="4" tab="6" state="vm.form.inputs" form-id="credential">
                {{:: vm.strings.get('inputs.GROUP_TITLE') }}
            </at-input-group>

            <at-action-group col="12" pos="right">
                <at-form-action type="secondary" ng-if="vm.isTestable"></at-form-action>
                <at-form-action type="cancel" to="credentials"></at-form-action>
                <at-form-action type="save"></at-form-action>
            </at-action-group>
        </at-form>
    </at-panel-body>
</at-panel>

<at-panel ng-if="$state.current.name.includes('permissions')" on-dismiss="credentials">
    <at-panel-heading title="{{:: vm.strings.get('permissions.TITLE') }}"></at-panel-heading>

    <at-tab-group class="at-TabGroup--padBelow">
        <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
        <at-tab state="vm.tab.permissions">{{:: vm.strings.get('tab.PERMISSIONS') }}</at-tab>
    </at-tab-group>

    <at-panel-body>
        <div class="at-CredentialsPermissions" ui-view="related"></div>
    </at-panel-body>
</at-panel>
<at-input-source-lookup
    ng-if="vm.inputSources.field"
    selected-id="vm.inputSources.credentialId"
    selected-name="vm.inputSources.credentialName"
    tabs="vm.inputSources.tabs"
    form="vm.inputSources.form"
    on-close="vm.onInputSourceClose"
    on-next="vm.onInputSourceNext"
    on-select="vm.onInputSourceSelect"
    on-tab-select="vm.onInputSourceTabSelect"
    on-item-select="vm.onInputSourceItemSelect"
    on-test="vm.onInputSourceTest"
    results-filter="vm.filterInputSourceCredentialResults"
/>
<at-external-credential-test
    ng-if="vm.externalTest.metadataInputs"
    on-close="vm.onExternalTestClose"
    on-submit="vm.onExternalTest"
    form="vm.externalTest.form"
/>
<div ng-if="$state.current.name.includes('permissions.add')" ui-view="modal"></div>
